<template>
  <div class="loginRegister">
    <h2 class="text-xl font-medium mb-4">注册账号</h2>
    <a-form
      :model="form"
      name="basic"
      autocomplete="off"
      ref="formRef"
      :rules="rules"
    >
      <a-form-item name="Phone">
        <a-input v-model:value="form.Phone" placeholder="请输入手机号" />
      </a-form-item>
      <a-form-item>
        <a-row justify="space-between">
          <a-input-password
            v-model:value="form.Code"
            placeholder="请输入验证码"
            class="w-4/6"
          />
          <a-button>获取验证码</a-button>
        </a-row>
      </a-form-item>
      <a-form-item name="Password">
        <a-input v-model:value="form.Password" placeholder="请输入密码" />
      </a-form-item>
      <a-form-item name="ConfirmPassword">
        <a-input
          v-model:value="form.ConfirmPassword"
          placeholder="请再次输入密码"
        />
      </a-form-item>
      <a-form-item>
        <a-button
          class="w-full rounded-3xl text-lg h-10"
          type="primary"
          html-type="submit"
          @click="handleSubmit"
          >确认</a-button
        >
      </a-form-item>
      <a-button
        class="w-full rounded-3xl text-lg h-10"
        html-type="submit"
        @click="cancel"
        >返回</a-button
      >
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
interface FormState {
  Phone: string
  Code: string
  Password: string
  ConfirmPassword: string
}
const form = ref<FormState>({
  Phone: '',
  Code: '',
  Password: '',
  ConfirmPassword: ''
})
const rules = {
  Phone: [
    { required: true, message: '请输入手机号!' },
    { min: 11, max: 11, message: '请输入11位手机号' }
  ],
  Password: [{ required: true, message: '请输入密码!' }],
  Code: [{ required: true, message: '请输入验证码!' }],
  ConfirmPassword: [{ required: true, message: '请再次输入密码!' }]
}
const handleSubmit = () => {}
const cancel = () => {}
</script>

<style scoped lang="less">
.loginRegister {
  > h2 {
    color: var(--theme-color);
  }
}
</style>
